<template>
  <div>
    <div class="header">
      <md-icon name="arrow-left" class="icon" @click="goBack"></md-icon>
      <hry-search
        class="search"
        text="请输入关键字"
        @changeSearch="changeSearch"
      ></hry-search>
    </div>
    <div class="history">
      <h1>历史记录</h1>
      <div>
        <span
          class="tag"
          v-for="(item, index) in recent"
          :key="index"
          @click="goPage(item)"
          >{{ item }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Icon.name]: Icon,
    hrySearch: () => import("@/components/search/index")
  },
  data() {
    return {
      recent: []
    };
  },
  methods: {
    goBack() {
      if (window.history.length > 2) {
        this.$router.back(-1);
      } else {
        this.$router.push({ name: "person" });
      }
    },
    goPage(value) {
      this.$router.push({ name: "order", query: { search: value } });
    },
    changeSearch(value) {
      if (value) {
        if (this.recent.length === 6) {
          this.recent.pop();
        }
        this.recent.unshift(value);
        localStorage.setItem("recent", JSON.stringify(this.recent));
        this.$router.push({ name: "order", query: { search: value } });
      }
    }
  },
  created() {
    let recent = localStorage.getItem("recent");
    if (recent) {
      this.recent = JSON.parse(recent);
    }
  }
};
</script>

<style scoped lang="stylus">
.header{
  height: 88px;
  text-align center;
  background white;
  padding 0 24px
  border-bottom 1px solid #D6D6D6
  font-size:36px;
  font-family:PingFang-SC-Regular;
  color:rgba(51,51,51,1);
  flex_content()
  flex_align_center()
  .icon{
    margin-right 57px
  }
  .search{
    width 80%
    padding 0
  }
}
  .history{
    padding 26px 24px
    h1{
      font-size:24px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .tag {
      display: inline-block;
      padding: 7px 30px;
      background: #e8e9eb;
      font-size: 25px;
      margin-right: 53px;
      margin-top: 27px;
      border-radius: 10px;
      &:before {
        content: "·";
        margin-right: 10px;
        font-weight: bolder;
      }
    }
  }
</style>
